<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
</head>
<body>
    <table class="layui-table" id="user" lay-filter="user">
    </table>
    <script type="text/javascript">
        // 第二：使用 layui 提供的模块
        layui.use(function() {
            // 第三：获取具体的 layui 模块实例对象 - 便于调用其方法，实现相关的操作
            // 1.获取 table 模块实例对象
            let table = layui.table;
            let form = layui.form;
            let layer = layui.layer;
            let dropdown = layui.dropdown;
            let upload = layui.upload;
            let element = layui.element;
            let $ = layui.jquery;

            // 2.动态渲染表格数据
            table.render({
                // 2.1)绑定表格节点
                elem: '#user',

                // 2.2)访问服务器程序，获取数据
                url: 'allUsers',

                // 2.3)定义表格各列，以及数据的绑定
                cols: [[
                    {field: 'id', fixed: 'left', width: 80, title: '用户ID', sort: true},
                    {field: 'username', width: 80, title: '账号'},
                    {field: 'password', width: 80, title: '密码'},
                    {field: 'level', width: 80, title: '水平等级'},
                    {field: 'image', title: '图片', width: 100},
                    {field: 'phone', title: '联系方式'},
                    {field: 'email', title: '邮箱'},
                    {field: 'registerTime', title: '注册时间'},
                    {field: 'status', title: '状态', fixed: 'right', width: 60}
                ]],

                // 2.4)把后台数据转换为 layui 中 table 组件所要求的数据格式，如果参数名称一致，则可以省略
                parseData: function (res) {
                    return {
                        "code": res.code == 200 ? 0 : res.code,
                        "data": res.data,
                        "msg": res.msg
                    };
                },
            });
        });
    </script>
</body>
</html>